<template>
  <div class="p-2">
    <ma-crud ref="crudRef" :columns="columns" :options="crud">
      <template #search-roleName="{ searchForm, component }">
        <a-input
          v-model.trim="searchForm[component.dataIndex]"
          :style="{ width: '240px' }"
          allow-clear
          placeholder="请输入角色名称"
        >
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #roleKey="{ record }">
        <a-tag color="arcoblue">{{ record.roleKey }}</a-tag>
      </template>
      <template #roleStatus="{ record }">
        <a-switch
          v-model="record.roleStatus"
          :loading="record.roleId === roleStatusLoading"
          checked-value="0"
          unchecked-value="1"
          @change="handleStatusChange(record, $event)"
        />
      </template>
      <template #operationBeforeExtend="{ record }">
        <a-space size="mini" v-if="record.roleId !== 1">
          <a-link @click="menuRole?.show(record.roleId)">菜单</a-link>
          <a-link @click="dataPermission?.show(record)">数据</a-link>
          <a-link @click="authUserRef.show(record.roleId)">分配</a-link>
        </a-space>
      </template>
      <template #operationCell="{ record }">
        <div v-if="record.roleId === 1"></div>
      </template>
    </ma-crud>
    <menu-role ref="menuRole" @success="() => crudRef.refresh()" />
    <data-permission ref="dataPermission" @success="() => crudRef.refresh()" />
    <auth-user ref="authUserRef" title="分配用户" @success="() => crudRef.refresh()" />
  </div>
</template>

<script lang="ts" name="Role" setup>
import { addRole, changeRoleStatus, delRole, listRole, updateRole } from "@/api/system/role";
import MenuRole from "@/views/system/role/components/menu-role.vue";
import DataPermission from "@/views/system/role/components/data-permission.vue";
import AuthUser from "@/views/system/role/components/auth-user.vue";
const roleStatusLoading = ref<string | number>("");
const menuRole = ref();
const crudRef = ref();
const dataPermission = ref();
const authUserRef = ref();

const crud = reactive({
  id: "roleId",
  pk: "roleId",
  title: "角色查询",
  formLayout: "vertical",
  formOption: {
    width: 600,
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 12, formList: [{ dataIndex: "roleName" }] },
          { span: 12, formList: [{ dataIndex: "roleKey" }] },
          { span: 12, formList: [{ dataIndex: "roleSort" }] },
          { span: 12, formList: [{ dataIndex: "roleStatus" }] },
          { span: 24, formList: [{ dataIndex: "remark" }] }
        ]
      }
    ]
  },
  api: listRole,
  showIndex: true,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 250,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addRole, auth: ["system:role:add"], text: "新增", show: true },
  delete: { api: delRole, auth: ["system:role:delete"], text: "删除", show: true },
  edit: { api: updateRole, auth: ["system:role:edit"], text: "编辑", show: true }
});

const columns = reactive([
  {
    title: "角色编号",
    dataIndex: "roleId",
    align: "center",
    hide: true
  },
  {
    title: "角色名称",
    dataIndex: "roleName",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "请输入角色名称"
    }
  },
  {
    title: "权限标识",
    dataIndex: "roleKey",
    align: "center",
    commonRules: {
      required: true,
      message: "请输入权限标识"
    }
  },
  {
    title: "角色顺序",
    dataIndex: "roleSort",
    formType: "input-number",
    align: "center",
    commonRules: {
      required: true,
      message: "请输入角色顺序"
    }
  },
  {
    title: "角色状态",
    dataIndex: "roleStatus",
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_normal_disable",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 0
  },
  {
    dataIndex: "remark",
    title: "描述",
    formType: "textarea",
    hide: true,
    autoSize: { minRows: 3, maxRows: 6 },
    maxLength: 200,
    showWordLimit: true
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  }
]);

const handleStatusChange = async (row: any) => {
  roleStatusLoading.value = row.roleId;
  try {
    await changeRoleStatus(row.roleId, row.roleStatus);
  } catch {
    row.roleStatus = row.roleStatus === "0" ? "1" : "0";
  } finally {
    roleStatusLoading.value = "";
  }
};
</script>
